// 横着为x 竖着为y
let CANVAS_HEIGHT;
let CANVAS_WIDTH;
let MARGIN_TOP = 100;
let MARGIN_LEFT = 400;
let R = 5; //小球的半径
const NUMGAP = 8*2*(R+1);
const COLONGAP = 5*2*(R+1);
let TIME_COLOR = "#34495e";
// 保存所有的小球
const balls = [];
const COLORS = ["#1abc9c","#2ecc71","#3498db","#9b59b6","#8e44ad","#27ae60","#e67e22","#c0392b","#f39c12"];
CANVAS_HEIGHT = document.body.clientHeight;
CANVAS_WIDTH = document.body.clientWidth;
const floor = Math.floor;



let {hour:preHour,minute:preMinute,second:preSecond} = getTime();

function getTime() {
    let time = new Date();
    let hour =  time.getHours();
    let minute = time.getMinutes();
    let second = time.getSeconds();
    return {
        hour,
        minute,
        second
    }
}


// 小球类--包含小球状态更新---碰撞，不可见检测
class Ball {
    constructor(x,y,id) {
        this.x = x;
        this.y = y;
        this.vg = Math.random()+0.5;
        this.vx = (Math.random() - 0.5)*2 + 0.5;
        this.vy = -Math.random()*10;
        this.color = COLORS[floor(Math.random()*COLORS.length)];
    }
    shouldDead() {
        if(this.x < 0 || this.x - R > CANVAS_WIDTH) {
            return true;
        }
        return false;
    }
    checkCollide() {
        if(this.y+R > CANVAS_HEIGHT) {
            if(this.vy<3) {
                this.vg = 0;
                this.vy = 0;
                this.y = CANVAS_HEIGHT - R;
            } else {
                this.vy = -0.75*this.vy;
            }
        }
    }
    update() {
        this.x += this.vx;
        this.y += this.vy;
        this.vy += this.vg;
        this.checkCollide();
    }
}


window.onload = function() {
    let canvas = document.getElementById("canvas");
    canvas.width = CANVAS_WIDTH;
    canvas.height = CANVAS_HEIGHT;
    let ctx = canvas.getContext("2d");

    // 控制渲染差不多在20fps左右
    setInterval(()=>{
        ctx.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);
        render(ctx);
        update(ctx);
    },20)
}

// 更新需要计算的数据
const update = function(ctx) {
    // 更新小球
    for(let i=0;i<balls.length;i++)
        balls[i].update();
    
    let cnt = 0;
    for(let i=0;i<balls.length;i++)
        if(balls[i].x>0&&balls[i].x-R<CANVAS_WIDTH) {
            balls[cnt++] = balls[i];
        }
    while(balls.length>cnt) {
        balls.length--;
    }
    // 更新时间
    let {
        hour:nHour,
        minute:nMinute,
        second:nSecond
    } = getTime();

    if(floor(preSecond/10)!==floor(nSecond/10)) {
        generateBolls(MARGIN_LEFT + 2*COLONGAP + 4*NUMGAP,MARGIN_TOP,floor(preSecond/10));
    }
    if(preSecond%10  !== nSecond%10) {
        generateBolls(MARGIN_LEFT + 2*COLONGAP + 5*NUMGAP,MARGIN_TOP,preSecond%10);
    }

    
    preHour = nHour;
    preMinute = nMinute;
    preSecond = nSecond;
}


// 绘制一个小球
const drawBoll = function(ctx,x,y,color) {
    ctx.beginPath();
    ctx.arc(x,y,R,0,2*Math.PI);
    ctx.fillStyle = color
    ctx.fill();
}

// 生成对应数字生成的小球
const generateBolls = function(x,y,num) {
    for(let i=0;i<10;i++)
        for(let j=0;j<7;j++) {
            if(digit[num][i][j]) 
                balls.push(new Ball(x+j*2*(R+1)+R+1,y+i*2*(R+1)+R+1,balls.length));
        }
}

const drawNumber = function(ctx,x,y,num) {
    for(let i=0;i<10;i++)
        for(let j=0;j<7;j++) {
            if(digit[num][i][j])
                drawBoll(ctx,x + j*2*(R+1) + R + 1,y + i*2*(R+1) + R + 1,TIME_COLOR);
        }
}

const drawColon = function(ctx,x,y) {
    for(let i=0;i<10;i++)
        for(let j=0;j<4;j++) {
            if(digit[10][i][j]) 
                drawBoll(ctx,x + j*2*(R+1) + R + 1,y + i*2*(R+1) + R + 1,TIME_COLOR);
        }
}

const render = function(ctx) {


    let hour = preHour;
    let minute = preMinute;
    let second = preSecond;


    // 绘制时间
    drawNumber(ctx,MARGIN_LEFT,MARGIN_TOP, floor(hour/10));
    drawNumber(ctx,MARGIN_LEFT + NUMGAP,MARGIN_TOP,hour%10);
    drawColon(ctx,MARGIN_LEFT + 2*NUMGAP,MARGIN_TOP);
    drawNumber(ctx,MARGIN_LEFT + COLONGAP + 2*NUMGAP,MARGIN_TOP,floor(minute/10));
    drawNumber(ctx,MARGIN_LEFT + COLONGAP + 3*NUMGAP,MARGIN_TOP,minute%10);
    drawColon(ctx,MARGIN_LEFT + COLONGAP + 4*NUMGAP,MARGIN_TOP);
    drawNumber(ctx,MARGIN_LEFT + 2*COLONGAP + 4*NUMGAP,MARGIN_TOP,floor(second/10));
    drawNumber(ctx,MARGIN_LEFT + 2*COLONGAP + 5*NUMGAP,MARGIN_TOP,second%10);

    // 绘制所有小球
    for(let x of balls) {
        drawBoll(ctx,x.x,x.y,x.color);
    }
}